import React, { useEffect, useState } from 'react'
import { postFindAll } from '../../../api/csy/api';
import { ProductCard } from 'react-vant';
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
import { HeartFill } from 'antd-mobile-icons'
import { getNoteList } from '../../../api/yjr/yjr_api';
import '../style/more.css'
import { Image } from 'react-vant';

export default React.memo(function More() {

    useEffect(() => {
        const integralShop = sessionStorage.getItem('integralShop')
        if (integralShop) {
            if ((JSON.parse(integralShop).flag) === true) {
                sessionStorage.setItem('integralShop', JSON.stringify({ flag: false }))
                window.location.reload()
            }
        } else {
            sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
        }
    }, [])


    const [notes, setNotes] = useState<any[]>([])

    const navigate = useNavigate()

    const noteList = async () => {
        const res = await postFindAll()
        if (res.data.code === 200) {
            setNotes(res.data.data)
        }
    }

    const bright = async (id: string) => {
        const res = await getNoteList({ id })
        if (res.data.code === 200) {
            noteList()
        }
    }


    const back = () => {
        sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))
        navigate(-1)
    }

    const checkMeditType = (urlData: any) => {
        const suffix = urlData.split('.').pop().toLowerCase();
        const image = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
        const video = ['mp4', 'avi', 'mov', 'rmvb', 'flv', 'mkv'];

        if (image.includes(suffix)) {
            return "image"
        } else if (video.includes(suffix)) {
            return "video"
        } else {
            return null
        }
    }

    const handleTiao = (id: string) => {
        navigate(`/context?id=${id}`)
    }

    useEffect(() => {
        noteList()
    }, [])

    return (
        <div>
            <div className='header'>
                <NavBar onBack={back}>笔记广场</NavBar>
            </div>

            <div className='body'>
                {
                    notes.map((item: any) => {
                        return (
                            <ProductCard
                                className='product-card'
                                key={item._id}
                                num={<div style={{ display: 'flex' }}>{
                                    item.flag === false ?
                                        <HeartFill style={{ fontSize: '1.5rem', marginTop: '.3rem' }} onClick={() => bright(item._id)} />
                                        : <HeartFill style={{ fontSize: '1.5rem', marginTop: '.3rem', color: 'red' }} onClick={() => bright(item._id)} />
                                }
                                    <h3 style={{ marginRight: '1rem' }}>{item.like}</h3>
                                </div>}
                                desc={<div className='text'>{item.textarea}</div>}
                                title={<div className='text'>{item.user.phone}</div>}
                                thumb={
                                    checkMeditType(item.path) == 'image' ?
                                        <Image lazyload src={item.path} onClick={() => handleTiao(item._id)} /> :
                                        <video style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '1.5rem' }} src={item.path} onClick={() => handleTiao(item._id)}></video>
                                }
                                tags={
                                    <div className='tags'>
                                        {
                                            checkMeditType(item.path) == 'image' ?
                                                <img src={item.path} style={{ width: '100%', height: '100%' }} className='tou' /> :
                                                <video style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '1.5rem' }} className='tou' src={item.path} onClick={() => handleTiao(item._id)}></video>
                                        }
                                    </div>
                                }

                            />
                        )
                    })
                }

            </div>

        </div>
    )
})
